<script>
import {defineComponent, reactive, toRefs, onMounted, computed} from "vue";
import TabCard from "../../../components/TabCard.vue";
import ConfigControl from "../../../components/ConfigControl.vue";
import StandardPlayer from "../../../components/StandardPlayer.vue";
import ModuleCard from "../../../components/ModuleCard.vue";
import ConfigButtonGroup from "../../../components/ConfigButtonGroup.vue";
import ConfigItem from "../../../components/ConfigItem.vue";
import ConfigCheck from "../../../components/ConfigCheck.vue";
import ConfigCombo from "../../../components/ConfigCombo.vue";
import ConInput from "@/components/ConInput.vue";
import {getOsdInfo, setOsdInfo} from "@/api/configure.js";
import ComPreview from "@/components/ComPreview.vue";
import {apiSetZoomSmall, apiSetZoomBig, apiSetZoomStop} from '../../../api/preview.js'

export default defineComponent({
  components: {
    TabCard,
    ConfigControl,
    StandardPlayer,
    ModuleCard,
    ConfigButtonGroup,
    ConfigItem,
    ConfigCheck,
    ConInput,
    ConfigCombo,
    ComPreview,
  },
  setup() {
    const state = reactive({
      currentTab: -1,
      osdForm: {
        line1: {},
        line2: {},
        line3: {},
        line4: {},
        line5: {},
        line6: {},
        line7: {},
        line8: {},
        line9: {},
        line10: {},
        line11: {},
      },
      silderValue: 0,
      presetList: [
        {
          label: "预置点1",
          value: 1,
        },
        {
          label: "预置点2",
          value: 2,
        },
        {
          label: "预置点3",
          value: 3,
        },
        {
          label: "预置点4",
          value: 4,
        },
        {
          label: "预置点5",
          value: 5,
        },
        {
          label: "预置点6",
          value: 6,
        },
        {
          label: "预置点7",
          value: 7,
        },
        {
          label: "预置点8",
          value: 8,
        },
        {
          label: "预置点9",
          value: 9,
        },
        {
          label: "预置点10",
          value: 10,
        },
        {
          label: "预置点11",
          value: 11,
        },
        {
          label: "预置点12",
          value: 12,
        },
        {
          label: "预置点13",
          value: 13,
        },
        {
          label: "预置点14",
          value: 14,
        },
        {
          label: "预置点15",
          value: 15,
        },
        {
          label: "预置点16",
          value: 16,
        },
        {
          label: "预置点17",
          value: 17,
        },
        {
          label: "预置点18",
          value: 18,
        },
        {
          label: "预置点19",
          value: 19,
        },
        {
          label: "预置点20",
          value: 20,
        },
      ],
      selectIndex: 0,
      player: "",
      dayFormat: "XXXX-XX-XX(年月日)",
      timeFormat: "12小时制",
      currentLine: 1,
      colorOptions: [
        {
          label: "红色",
          value: "255,0,0",
        },
        {
          label: "白色",
          value: "255,255,255",
        },
        {
          label: "黄色",
          value: "255,255,0",
        },
        {
          label: "绿色",
          value: "0,255,0",
        },
        {
          label: "蓝色",
          value: "0,0,255",
        },
        {
          label: "黑色",
          value: "0,0,0",
        },
      ],
    });

    const showName = computed({
      get() {
        return state.osdForm.line2.content ? true : false;
      },
      set(newValue) {
        if (newValue) {
          state.osdForm.line2.content = "通道名称";
        } else {
          state.osdForm.line2.content = "";
        }
      },
    });

    const showTime = computed({
      get() {
        return state.osdForm.line1.content ? true : false;
      },
      set(newValue) {
        if (newValue) {
          state.osdForm.line1.content = "timestamp";
        } else {
          state.osdForm.line1.content = "";
        }
      },
    });

    const showWeek = computed({
      get() {
        return state.osdForm.line3.content ? true : false;
      },
      set(newValue) {
        if (newValue) {
          state.osdForm.line3.content = "timeweek";
        } else {
          state.osdForm.line3.content = "";
        }
      },
    });

    const showOsd = computed({
      get() {
        let index = state.currentLine + 3;
        return state.osdForm["line" + index];
      },
      set(newValue) {
      },
    });

    const osdPositionX = computed({
      get() {
        if (!showOsd.value.position) {
          return "0";
        }
        let str = showOsd.value.position;

        return str.split(",")[0];
      },
      set(e) {
        let str = e + "," + osdPositionY.value;
        showOsd.value.position = str;
      },
    });

    const osdPositionY = computed({
      get() {
        if (!showOsd.value.position) {
          return "0";
        }
        let str = showOsd.value.position;

        return str.split(",")[1];
      },
      set(e) {
        let str = osdPositionX.value + "," + e;
        showOsd.value.position = str;
      },
    });

    onMounted(() => {
      getOSD();
    });

    const getOSD = () => {
      getOsdInfo().then((res) => {
        let obj = {
          line1: {
            font_size: 1,
            content: "timestamp",
            font_thickness: 2,
            font_color: "255,255,255",
            position: "50,50",
          },
          line2: {
            font_size: 1,
            content: "通道名称",
            font_thickness: 2,
            font_color: "255,255,255",
            position: "50,1030",
          },
          line3: {
            font_size: 1,
            content: "timeweek",
            font_thickness: 2,
            font_color: "255,255,255",
            position: "370,50",
          },
          line4: {
            font_size: 1,
            content: "222",
            font_thickness: 2,
            font_color: "255,255,255",
            position: "370,50",
          },
          line5: {
            font_size: 1,
            content: "333",
            font_thickness: 2,
            font_color: "255,255,255",
            position: "370,50",
          },
        };
        const json = JSON.parse(JSON.stringify(res.data))
        for (const key in json) {
          const item = json[key]
          if(item['font_size']) {
            if(typeof item['font_size'] === 'string') {
              item['font_size'] = parseInt(item['font_size'])
            }
          } else {
            item['font_size'] = 25
          }
        }
        state.osdForm = {...state.osdForm, ...json};
        // state.osdForm = { ...state.osdForm, ...obj };
      });
    };

    const setOsd = () => {
      let data = {};
      data.lines = [];
      for (let item in state.osdForm) {
        let index = Number(item.split("e")[1]);
        if (index > 3 && state.osdForm["line" + index].content) {
          data.lines.push(state.osdForm["line" + index]);
        } else if (index <= 3) {
          data["line" + index] = state.osdForm["line" + index];
        }
      }

      setOsdInfo(data).then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: "保存成功",
            type: "success",
            offset: 200,
          });
        } else {
          ElMessage({
            message: "报存失败",
            type: "warning",
          });
        }
      });
    };

    const showOSDSet = (e) => {
      state.currentLine = e;
    };

    const handleCurrentTabChange = (e) => {
      state.currentTab = e;
    };

    const selectItem = (index) => {
      state.selectIndex = index;
    };

    const changeCheck = (data) => {
      let index = Number(data.index) + 3;

      let now = state.osdForm["line" + index];

      if (data.flag) {
        now.content = "";
      } else {
        now.content = "";
        now.position = ",";
        now.font_color = "";
        now.font_size = "";
        now.font_thickness = "";
      }
    };

    const changeInput = (data) => {
      let now = state.osdForm["line" + data.index];
      now.content = data.input;
    };

    //调整焦距放大
    const handleZoomSmall = () => {
      apiSetZoomSmall().then(() => {
      });
    };
    //调整焦距缩小
    const handleZoomBig = () => {
      apiSetZoomBig().then(() => {
      });
    };

    const handleZoomStop = () => {
      apiSetZoomStop().then(() => {
      })
    }

    return {
      ...toRefs(state),
      handleCurrentTabChange,
      selectItem,
      showName,
      showTime,
      showWeek,
      showOSDSet,
      changeCheck,
      changeInput,
      showOsd,
      osdPositionX,
      osdPositionY,
      setOsd,
      handleZoomSmall,
      handleZoomBig,
      handleZoomStop
    };
  },
});
</script>

<template>
  <div class="image-container">
    <tab-card :tabs="['OSD设置']" @changeIndex="handleCurrentTabChange">
      <template v-if="currentTab === 0">
        <div class="left">
          <div class="top">
            <!-- <com-preview ref="refComPreview" has-print-screen has-recording /> -->
            <com-preview ref="refComPreview"/>
          </div>

          <div class="bottomMenu">
            <div class="attr">
              <span>OSD粗细</span>

              <el-input-number
                  class="numSelect"
                  v-model="showOsd.font_thickness"
                  :min="1"
                  :step="2"
                  :max="100"
                  style="width: 240px"
              />

              <!-- <el-input
                v-model.number="showOsd.font_thickness"
                style="width: 240px"
              /> -->
            </div>
            <div class="attr">
              <span>OSD字体</span>
<!--              <el-input-number-->
<!--                  class="numSelect"-->
<!--                  v-model="showOsd.font_size"-->
<!--                  :min="1"-->
<!--                  :max="100"-->
<!--                  :step="2"-->
<!--                  style="width: 240px"-->
<!--              />-->
              <el-select v-model="showOsd.font_size" style="width: 240px">
                <el-option label="小" :value="25" />
                <el-option label="中" :value="50" />
                <el-option label="大" :value="75" />
              </el-select>
              <!-- <el-input
                v-model.number="showOsd.font_size"
                style="width: 240px"
              /> -->
            </div>
            <div class="attr">
              <span>OSD颜色</span>
              <el-select
                  v-model="showOsd.font_color"
                  placeholder="请选择颜色"
                  size="large"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in colorOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>

              <!-- <span>OSD颜色</span> -->
              <!-- <el-input v-model="showOsd.font_color" style="width: 240px" /> -->
            </div>
            <div class="attr">
              <span>OSD位置</span>

              x:
              <el-input v-model="osdPositionX" style="width: 110px"/>
              y:
              <el-input v-model="osdPositionY" style="width: 110px"/>
            </div>
          </div>

          <div class="save" @click="setOsd">
            <div class="icon"></div>
            <span class="item">保存</span>
          </div>
        </div>

        <div class="middle">
          <div class="loop-box">
            <div class="control-bound">
              <config-control class="control-box"/>
              <div class="controls">
                <config-button-group :size="40"
                                     :category="0"
                                     border
                                     @left="handleZoomSmall"
                                     @right="handleZoomBig"
                                     @stop="handleZoomStop"/>
                <config-button-group
                    :size="40"
                    :category="1"
                    style="margin-top: 12px"
                />
              </div>
            </div>
          </div>

          <div class="sliderBox">
            <el-slider
                class="slider"
                style="width: 60%"
                size="small"
                :min="0"
                :max="10"
                v-model="silderValue"
            />
            <div class="sliderNum">{{ silderValue }}</div>
          </div>

          <div class="preset">
            <div class="presetBox">
              <div
                  class="presetItem"
                  v-for="(item, index) in presetList"
                  :key="item.value"
                  @click="selectItem(index)"
                  :class="index === selectIndex ? 'selectOne' : ''"
              >
                <span class="itemvalue">{{ item.value }}</span>
                <span class="label">{{ item.label }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="checked">
            <el-checkbox v-model="showName" label="显示名称"/>
          </div>
          <div class="checked">
            <el-checkbox v-model="showTime" label="显示日期"/>
          </div>
          <div class="checked">
            <el-checkbox v-model="showWeek" label="显示星期"/>
          </div>
          <div class="select">
            <span>通道名称</span>
            <el-input v-model="osdForm.line2.content" style="width: 240px"/>
          </div>
          <div class="select">
            <span>时间格式</span>
            <el-input disabled v-model="timeFormat" style="width: 240px"/>
          </div>
          <div class="select">
            <span>日期格式</span>
            <el-input disabled v-model="dayFormat" style="width: 240px"/>
          </div>

          <module-card title="字符叠加" class="module">
            <p>
              右下角区域放置字符叠加的123456行，左下角区域放置字符叠加的78行。
            </p>
            <config-item
                title-size="60px"
                @click="showOSDSet(1)"
                :class="{ active: currentLine === 1 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line4.content)"
                    label="1"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="4"
                  @update:value="changeInput"
                  :value="osdForm.line4.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(2)"
                :class="{ active: currentLine === 2 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line5.content)"
                    label="2"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="5"
                  @update:value="changeInput"
                  :value="osdForm.line5.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(3)"
                :class="{ active: currentLine === 3 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line6.content)"
                    label="3"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="6"
                  @update:value="changeInput"
                  :value="osdForm.line6.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(4)"
                :class="{ active: currentLine === 4 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line7.content)"
                    label="4"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="7"
                  @update:value="changeInput"
                  :value="osdForm.line7.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(5)"
                :class="{ active: currentLine === 5 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line8.content)"
                    label="5"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="8"
                  @update:value="changeInput"
                  :value="osdForm.line8.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(6)"
                :class="{ active: currentLine === 6 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line9.content)"
                    label="6"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="9"
                  @update:value="changeInput"
                  :value="osdForm.line9.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(7)"
                :class="{ active: currentLine === 7 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line10.content)"
                    label="7"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="10"
                  @update:value="changeInput"
                  :value="osdForm.line10.content"
              />
            </config-item>
            <config-item
                title-size="60px"
                @click="showOSDSet(8)"
                :class="{ active: currentLine === 8 }"
            >
              <template #title>
                <config-check
                    :check="Boolean(osdForm.line11.content)"
                    label="8"
                    @change="changeCheck"
                    :false-has-image="false"
                />
              </template>
              <con-input
                  label="11"
                  @update:value="changeInput"
                  :value="osdForm.line11.content"
              />
            </config-item>
          </module-card>
        </div>
      </template>
    </tab-card>
  </div>
</template>

<style lang="scss">
.image-container {
  height: 100%;

  .left {
    float: left;
    height: 100%;

    .top {
      height: 450px;
      width: 500px;
    }

    .bottomMenu {
      height: 300px;
      margin-top: 20px;

      .attr {
        margin-top: 10px;

        span {
          margin-right: 20px;
        }

        .numSelect {
          .el-input-number__increase {
            margin: 0;
          }
        }
      }
    }
  }

  .middle {
    height: 100%;
    float: left;
    width: 20%;
    margin-left: 20px;
    margin-right: 30px;

    .control-bound {
      display: flex;

      .controls {
        margin-left: 12px;
      }
    }

    .sliderBox {
      height: 30px;

      .slider {
        float: left;
      }

      .sliderNum {
        float: left;
        margin-left: 10px;
        width: 40px;
        height: 25px;
        text-align: center;
        border: 1px solid #e4e7ed;
      }
    }

    .preset {
      height: 280px;
      width: 78%;
      border: 1px solid black;

      .presetBox {
        pointer-events: none;
        height: 100%;
        overflow-y: auto;

        .presetItem {
          height: 34px;
          font-size: 18px;
          line-height: 34px;

          .itemvalue {
            margin-left: 10px;
          }

          .label {
            margin-left: 40px;
          }

          &.selectOne {
            background-color: #e6e6e6;
          }
        }
      }
    }
  }

  .right {
    height: 100%;
    float: left;

    .select {
      margin-top: 10px;

      span {
        margin-right: 30px;
      }
    }

    .module {
      margin-top: 10px;

      .active {
        background-color: rgb(205, 253, 255);
      }
    }
  }

  .save {
    background-color: #fe6266;
    color: #ffffff;
    height: 32px;
    width: 200px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;

    .icon {
      background-image: url("@/assets/components/save-card--save.png");
      background-size: cover;
      width: 20px;
      height: 20px;
    }
  }
}
</style>
